<template>
    <div class="ele-body">
        <el-card shadow="never" body-style="padding:22px 22px 0 22px;">
            <el-form :model="where" label-width="85px" class="ele-form-search">

                <el-row :gutter="5">
                    <el-col :md="5" :sm="12">
                        <el-form-item label="班级：">
                            <el-select v-model="where.class_id" placeholder="全部" size="small" clearable>
                                <el-option
                                    v-for="item in extra.devices"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="5" :sm="12">
                        <el-form-item label="考勤分组：">
                            <el-select v-model="where.device_type" placeholder="全部" size="small" clearable>
                                <el-option
                                    v-for="item in extra.devices"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="5" :sm="12">
                        <el-form-item label="学生：">
                            <el-input v-model="where.name" placeholder="请输入学生姓名" size="small" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :md="5" :sm="12">
                        <el-form-item label="学号：">
                            <el-input v-model="where.number" placeholder="请输入学生学号" size="small" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="5">
                    <el-col :md="6" :sm="12">
                        <el-form-item label="时间：">
                            <el-date-picker
                                v-model="where.time"
                                type="datetimerange"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small" 
                                >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :md="12" :sm="12">
                        <el-form-item>
                            <div class="datetime-sel">
                                <el-button-group>
                                    <el-button size="small" @click="dateFilter('dt')">当天考勤</el-button>
                                    <el-button size="small" @click="dateFilter('bz')">本周</el-button>
                                    <el-button size="small" @click="dateFilter('bm')">本月</el-button>
                                </el-button-group>
                            </div>
                            <div class="search-btns">
                                <el-button 
                                    size="small" 
                                    type="primary" 
                                    @click="filter"
                                    icon="el-icon-search"
                                    class="ele-btn-icon">查询
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
        </el-card>

        <el-card shadow="never">
            <!-- 表格工具栏 -->
            <div class="ele-table-tool">
                <div class="ele-table-tool-left">
                    <el-button @click="showEdit=true" type="default" icon="el-icon-s-data" class="ele-btn-icon" size="small">导出</el-button>
                </div>
            </div>
            <!-- 数据表格 -->
            <ele-data-table ref="table" :config="table" height="550">
                <template slot-scope="{index}">
                    <el-table-column type="index" label="序号" :index="index" width="60" align="center" fixed="left" show-overflow-tooltip/>
                    <el-table-column prop="name" label="姓名" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="class_id" label="考情组名称" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="class_id" label="人员状态" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="class_id" label="班级" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="class_id" label="学号" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="class_id" label="日期" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="class_id" label="班次" show-overflow-tooltip min-width="110"/>

                    <el-table-column label="上学1" align="center">
                        <el-table-column prop="class_id" label="打卡时间" min-width="110" align="center"/>
                        <el-table-column prop="number" label="打卡结果" min-width="110" align="center"/>
                        <el-table-column prop="class_id" label="体温"  min-width="110" align="center"/>
                    </el-table-column>

                    <el-table-column label="放学1" align="center">
                        <el-table-column prop="class_id" label="打卡时间" min-width="110" align="center"/>
                        <el-table-column prop="number" label="打卡结果" min-width="110" align="center"/>
                        <el-table-column prop="class_id" label="体温"  min-width="110" align="center"/>
                    </el-table-column>

                    <el-table-column label="上学2" align="center">
                        <el-table-column prop="class_id" label="打卡时间" min-width="110" align="center"/>
                        <el-table-column prop="number" label="打卡结果" min-width="110" align="center"/>
                        <el-table-column prop="class_id" label="体温"  min-width="110" align="center"/>
                    </el-table-column>

                    <el-table-column label="放学2" align="center">
                        <el-table-column prop="class_id" label="打卡时间" min-width="110" align="center"/>
                        <el-table-column prop="number" label="打卡结果" min-width="110" align="center"/>
                        <el-table-column prop="class_id" label="体温"  min-width="110" align="center"/>
                    </el-table-column>

                    <el-table-column label="上学3" align="center">
                        <el-table-column prop="class_id" label="打卡时间" min-width="110" align="center"/>
                        <el-table-column prop="number" label="打卡结果" min-width="110" align="center"/>
                        <el-table-column prop="class_id" label="体温"  min-width="110" align="center"/>
                    </el-table-column>

                    <el-table-column label="放学3" align="center">
                        <el-table-column prop="class_id" label="打卡时间" min-width="110" align="center"/>
                        <el-table-column prop="number" label="打卡结果" min-width="110" align="center"/>
                        <el-table-column prop="class_id" label="体温"  min-width="110" align="center"/>
                    </el-table-column>

                    <el-table-column prop="class_id" label="关联的审批请假单" show-overflow-tooltip min-width="150"/>

                </template>
            </ele-data-table>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "Record",
    data() {

        let time = this.$util.oneDayRange();
        
        return {
            table: { // 表格配置
                url: 'https://cdn.eleadmin.com/20200610/list-demo-basic.json',
                where: {}
            },
            extra: {
                devices: [
                    { value: "1", label: "对比服务器" },
                    { value: "2", label: "人脸闸机" },
                ],
                agelist: [
                    { id: 1, name: "小孩（<15岁）", value: "lt-15"},
                    { id: 2, name: "青少年（15-20岁）", value: "15-20"},
                    { id: 3, name: "青年（20-30岁）", value: "20-30"},
                    { id: 4, name: "中青年（30-35岁）", value: "30-35"},
                    { id: 5, name: "中年（35-45岁）", value: "35-45"},
                    { id: 6, name: "中老年（45-55岁）", value: "45-55"},
                    { id: 7, name: "老年（>55岁）", value: "gt-55"},
                ],
            },
            where: {
                time: time
            }
        }
    },

    methods: {

        /* 清空选择 */
        clearChoose() {
            this.$refs.table.clearSelection();
        },

        /* 保存编辑 */
        save() {
            this.$refs['editForm'].validate((valid) => {
                if (valid) {
                this.editLoading = true;
                setTimeout(() => {
                    this.editLoading = false;
                    this.showEdit = false;
                    this.$message({type: 'success', message: '保存成功'});
                }, 300);
                } else {
                return false;
                }
            });
        },

        /* 编辑 */
        edit(row) {
            this.editForm = Object.assign({}, row);
            this.showEdit = true;
        },

        /* 下拉按钮点击 */
        dropClick(command) {
            if (command === 'del') {
                this.$message('点击了批量删除');
                this.clearChoose();
            } else if (command === 'check') {
                this.$message('点击了批量审批');
            }
        },

        filter() {

        }
    }
}
</script>

<style scoped>
.datetime-sel, .search-btns {
    margin: 0 10px;
    float: left;
}
</style>